<template>
  <div class="subpage edit-password-container">
      <ul class="edit-password-box">
          <li>
              <div class="tag-name">手机号</div>
              <div class="tag-info">{{showPhone}}</div>
          </li>
          <li>
              <div class="tag-name">验证码</div>
              <div class="tag-info">
                    <input type="tel" class="auth-code" placeholder="请输入验证码" maxlength="4" v-model="authCode">
                    <button class="u-send-msg-btn" v-if="!sendMsgFlag" @click="sendMsg" :disabled="sendMsgFlag">{{sendBtnText}}</button>
                    <span class="times color-primary" v-if="sendMsgFlag">{{times}}</span>
              </div>
          </li>
          <li>
              <div class="tag-name">设置密码</div>
              <div class="tag-info">
                  <input :type="inputType" placeholder="请输入6～16位数字字母组合密码" maxlength="16" v-model="password">
                  <van-icon :name="iconName" :class="className" @click='changeInputType' />
              </div>
          </li>
      </ul>
      <div class="btn-box">
        <van-button round class="u-btn-default u-bg-gradient-light" @click="sureFn()">确认</van-button>
      </div>
  </div>
</template>

<script>
export default {
    data() {
        return {
            phone: '',
            showPhone: '',
            password: '',
            authCode: '', //验证码
            sendMsgFlag: false, //发送验证码状态
            sendBtnText: '发送验证码', //验证码文字
            times: '60s', //倒计时文字
            changeInputTypeFlag: false, //修改input类型
            inputType: 'password', //input类型
            iconName: 'closed-eye', //图标
            className: 'inp-icon color-gray' //类名
        }
    },
    created() {
        let userPhone = this.$store.getters.userInfo.phone;
        this.phone = userPhone;
        this.showPhone = userPhone.substr(0, 3) + '****' + userPhone.substr(7);
    },
    methods: {
        changeInputType() { //更换输入框类型
            this.changeInputTypeFlag = !this.changeInputTypeFlag;
            if(this.changeInputTypeFlag){
                this.inputType = 'text';
                this.iconName = 'eye';
                this.className = 'inp-icon color-primary';
            }else{
                this.inputType = 'password';
                this.iconName = 'closed-eye';
                this.className = 'inp-icon color-gray';
            }
        },
        sendMsg() { //发送验证码
            if(!this.$tool.validator.isEmpty(this.phone)){
                this.$tool.toast('请输入手机号')
                return;
            }

            if(!this.$tool.validator.isMobilePhone(this.phone)){ 
                this.$tool.toast('请输入正确的手机号')
                return; 
            }
            this.sendMsgAjax()
        },

        sendMsgAjax() {
            let postData = {
                phone: this.phone,
                smsType: 3
            }
            this.$api.post('/api/sms/send_sms', postData)
                .then((res) => {
                    this.sendMsgFlag = true;
                    this.countdown();
                })
        },

        countdown() { //倒计时
            let time = 60;
            let t = setInterval(() => {
                time--;
                this.times = `${time}s`;
                if(time <= 0){
                    clearInterval(t)
                    this.sendBtnText = '重新获取';
                    this.sendMsgFlag = false;
                    this.times = '60s';
                }
            }, 1000)
        },

        sureFn() {
            if(!this.$tool.validator.isEmpty(this.authCode)){
                this.$tool.toast('请输入验证码')
                return;
            }

            if(!this.$tool.validator.isMsgCode(this.authCode)){
                this.$tool.toast('请输入4位数字验证码')
                return;
            }

            if(!this.$tool.validator.isEmpty(this.password)){
                this.$tool.toast('请输入密码')
                return;
            }
            
            if(!this.$tool.validator.isPassword(this.password)){
                this.$tool.toast('请输入6~16位数字字母组合密码')
                return;
            }
            
            this.sureAjax()
        },

        sureAjax() {
            let postData = {
                phone: this.phone,
                smsCode: this.authCode,
                pwd: this.$md5(this.password)
            }
            this.$api.post('/api/user/reset_pwd', postData)
                .then((res) => {
                    this.$store.commit("userLoginOut");
                    this.$tool.toast('修改成功，请重新登录', 1000)
                    setTimeout(() => {
                        this.$router.push({
                            name: 'login'
                        })
                    }, 1200);
                })
        }
    }
}
</script>

<style lang="scss" scoped>
    .edit-password-container {
        .edit-password-box {
            width: 100%;
            background-color: #fff;
            li {
                width: 100%;
                padding: 20px 16px;
                box-sizing: border-box;
                display: flex;
                justify-content: space-between;
                align-items: center;
                font-size: 16px;
                color: #5D6164;
                border-bottom: 1px solid #f2f2f2;
                &:last-child {
                    border-bottom: none;
                }
                .tag-name {
                    width: 84px;
                }
                .tag-info {
                    display: flex;
                    flex: 1;
                    justify-content: space-between;
                    align-items: center;
                    input {
                        padding: 0;
                        flex: 1;
                        font-size: 16px;
                        outline: none;
                        border: none;
                        background-color: #fff;
                        &::-webkit-input-placeholder { /* Chrome/Opera/Safari */ 
                            font-size: 14px;
                        }
                        &::-moz-placeholder { /* Firefox 19+ */  
                            font-size: 14px;
                        }
                        &:-ms-input-placeholder { /* IE 10+ */ 
                            font-size: 14px;
                        }
                        &:-moz-placeholder { /* Firefox 18- */ 
                            font-size: 14px;
                        }
                    }
                    .inp-icon {
                        margin-left: 14px;
                        font-size: 20px;
                    }
                    .auth-code {
                        width: 40px;
                    }
                    span {
                        width: 80px;
                        text-align: right;
                    }
                }
            }
        }
        .btn-box {
            width: 100%;
            padding: 0 16px;
            box-sizing: border-box;
            margin-top: 32px;
        }
    }
</style>